<!-- 我的单个 -->

<template>
  <div>
    <div>
      <span>待选择用户 ({{ model.id ? 1 : 0 }}/{{ list.length }})</span>
      <span class="floatRight">共 {{ total }} 人</span>
    </div>

    <el-input v-model="param.name" suffix-icon="el-icon-search" placeholder="用户名称" clearable @change="toSearch" />

    <WebTable v-if="info.deliver" v-bind="tableProps" @select="toSelect">
      <RowCheckbox :disabled="info.disabled" :grayed="info.grayed" />
      <RowText label="人员名称" bind="name" :width="90" />
      <RowTree label="当前位置" bind="areaId, areaName" :dict="CORE.REGION.DICT" allName />
      <RowText label="工单数" bind="orderTotal" :width="80" />
      <RowText label="评分" bind="starNumber" :width="70" />
      <RowText label="平均用时" bind="handleDuration">
        <template #default="{ text }">{{ CORE.numDuringTwo((text / 1000) | 0) }}</template>
      </RowText>
      <RowStatus label="当前状态" bind="workStatus" :dict="CORE.DICT.STATUS_WORKER_DELIVER" :width="90" />
    </WebTable>

    <WebTable v-else-if="scope === 1" v-bind="tableProps" @select="toSelect">
      <RowCheckbox :disabled="info.disabled" :grayed="info.grayed" />
      <RowText label="人员名称" bind="name" :width="90" />
      <RowText label="角色" bind="role" />
      <RowText label="工单数" bind="orderTotal" :width="80" />
      <RowText label="评分" bind="starNumber" :width="70" />
      <RowText label="平均用时" bind="handleDuration">
        <template #default="{ text }">{{ CORE.numDuringTwo((text / 1000) | 0) }}</template>
      </RowText>
      <RowStatus label="排班情况" bind="onWork" :dict="CORE.DICT.STATUS_WORKER_REPAIR" :width="90" />
    </WebTable>

    <WebTable v-else v-bind="tableProps" @select="toSelect">
      <RowCheckbox :disabled="info.disabled" :grayed="info.grayed" />
      <RowText label="用户名称" bind="name" left />
      <RowText v-if="info.hasMobile" label="用户手机" bind="phone" :width="130" left />
      <RowText label="角色" bind="role" :minWidth="150" left />
    </WebTable>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixSingle from '@admin/components/choose/mixSingle'

// 广度优先遍历
const queue = []
const transOrganIdList = (arr = []) => {
  const idList = []

  // 初始入队
  arr.forEach((item) => queue.push(item))

  while (queue.length) {
    // 队中首个
    const { id, children = [] } = queue.shift()
    idList.push(id)

    // 下一层入队
    children.forEach((item) => queue.push(item))
  }

  return idList
}

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MySingle',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixSingle, CORE.mixTree('organ', 'organ_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 应用范围
     */
    scope() {
      const { scope } = this.$parent || {}
      return scope
    },

    /**
     * 组织 ID 列表
     */
    organIdList() {
      return transOrganIdList(this.organ_tree)
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 转换选中项
     */
    transChosen(chosen) {
      const { param, organIdList } = this

      if (param.treeId) chosen.organId = [param.treeId]
      else chosen.organId = organIdList.filter((id) => (chosen.organId || []).includes(id))

      return chosen
    },
  },
}
</script>
